<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
  <header class="header">
    <label for="toggler" class="menuBtn">
        <span class="text-wrapper">MENU</span>
        <span class="round-wrapper">
            <span class="square">
                <i class="round"></i>
                <i class="round"></i>
                <i class="round"></i>
                <i class="round"></i>
            </span>
        </span>
    </label>
  </header>
  <div class="menu">
    <input type="checkbox" id="toggler">
    <div class="green-wrapper menu-item"></div>
    <div class="pink-wrapper menu-item"></div>
    <div class="purple-wrapper menu-item">
        <div class="left-wrapper">
            <div class="top-wrapper">
                <label for="toggler" class="close-wrapper">
                    <span class="text-wrapper">CLOSE</span>
                </label>
            </div>
            <div class="menu-title-wrapper">
                <div class="title-content">
                    <div class="menu-title"><span class="menu-text">HOMEPAGE</span></div>
                    <div class="menu-title"><span class="menu-text">WORKS</span></div>
                    <div class="menu-title"><span class="menu-text">ABOUT ME</span></div>
                    <div class="menu-title"><span class="menu-text">CAREERS</span></div>
                    <div class="menu-title"><span class="menu-text">CONTENT US</span></div>
                </div>
            </div>
        </div>
        <div class="right-wrapper">
            <div class="panel-wrapper">
                <div class="panel-contnet">
                    <span class="show-panel">DATA</span>
                    <span class="hover-panel">DATA</span>
                </div>
            </div>
            <div class="panel-wrapper">
                <div class="panel-contnet">
                    <span class="show-panel">START</span>
                    <span class="hover-panel">START</span>
                </div>
            </div>
            <div class="panel-wrapper">
                <div class="panel-contnet">
                    <span class="show-panel">CREATION</span>
                    <span class="hover-panel">CREATION</span>
                </div>
            </div>
            <div class="panel-wrapper">
                <div class="panel-contnet">
                    <span class="show-panel">IMPACT</span>
                    <span class="hover-panel">IMPACT</span>
                </div>
            </div>
        </div>
    </div>
  </div>
    <div class="home">
        <div class="title-wrapper">
            <h1 class="title">
                <div class="inner-word">
                    Maos IS A #FFF
                </div>
                <div class="inner-word">
                    PLACE GIVE ME COIN
                </div>
            </h1>
            <i class="icon icon-cricle"></i>
            <i class="icon icon-triangle"></i>
        </div>
        <div class="letter-wrapper">
            <span class="letter">1</span>
            <span class="letter">J</span>
            <span class="letter">3</span>
            <span class="letter">L</span>
        </div>
    </div>
</body>

</html>